<template>
	<div id="wrap">
		<!-- 中间注册流程区 -->
		<div id="cont">
			<div class="l_header_bg"></div>
			<div class="l_cont">
				<div class="l_cont_view">

					<div class="l_cont_header">
						<div class="contjoin_header_one" :class="contjoin_header_one" target="l_cont_cont" @click="warehouseContentDetail('one')">版权内容详情</div>
						<div class="contjoin_header_two" :class="contjoin_header_two" target="l_cont_twocont" @click="warehouseContentDetail('two')">著作权证书详情</div>
						<div class="contjoin_header_three">
							<span :class="contjoin_header_one_line"></span>
							<span :class="contjoin_header_two_line"></span>
						</div>
					</div>
					<div v-if="warehouseContent" class="l_cont_cont" id="l_cont_cont">
						<div class="l_cont_one">
							<div class="l_header">
								<span>内容基本信息</span>
							</div>
							<div class="l_one" id="l_one">
								<div class="l_onetype">
									<span class="onetype_span"><span style="color: red;">*</span>作品名称：</span><span id="title"></span>
								</div>
								<div class="l_onetype">
									<span class="onetype_span"><span style="color: red;">*</span>作品类别：</span><span id="worksType"></span>
								</div>
								<div class="l_onetype">
									<span class="onetype_span"><span style="color: red;">*</span>著作权人：</span><span id="owner"></span>
								</div>
								<div class="l_onetype">
									<span class="onetype_span">发布平台：</span><span id="platformName"></span>
								</div>
								<div class="" style="color:#666666;overflow: hidden;">
									<span class="public-adv">首发链接：</span><span id="releaseUrl" style="line-height: 20px;float: left;width:80%"></span>
								</div>

							</div>
						</div>
						<div class="l_cont_two">
							<div class="l_header">
								<span>作品相关文件</span>
							</div>
							<div class="l_two">
								<div class="l_threetype">
									<span class="threetype_span">作品文件：</span>
									<div class="twotype_div">
										<table border="1" cellspacing="0" cellpadding="0" id="rightTable">
											<tr>
												<th width="308">文件名称</th>
												<th width="136">确权状态</th>
												<th width="136">确权任务ID</th>
												<th width="196">确权时间</th>
												<th width="136">证书下载</th>
											</tr>
										</table>
									</div>

								</div>
							</div>
						</div>
						<div class="l_cont_three" >
							<div class="l_header">
								<span>著作权人信息</span>
							</div>
							<div class="l_three">
								<div class="l_threetype" id="l_threetype">
									<div style='width: 100%'>
										<span class='threetype_span' style='float:left'>著作权人1：</span>
										<div class='threetype_div' style='float:left'>
											<div class='l_three_div'>
												<span>姓名/单位名称：</span>
												<span class='copyRight-info-list'>ccm2018</span>
											</div>
											<div class='l_three_div'>
												<span>类别：</span><span class='copyRight-info-list'>社会团体法人</span>
												<span style='margin-left:20px'>证件类型：</span><span class='copyRight-info-list'>身份证</span>
												<span style='margin-left:20px'>证件号码：</span><span class='copyRight-info-list'>123456789088</span>
											</div>
											<div class='l_three_div'>
												<span>国家：</span><span class='copyRight-info-list'>中国</span>
												<span style='margin-left:20px'>省份：</span><span class='copyRight-info-list'>浙江</span>
												<span style='margin-left:20px'>城市：</span><span class='copyRight-info-list'>杭州</span>
											</div>
										</div>
									</div>
								</div>
							</div>
						</div>
						<div class="l_cont_four" >
							<div class="l_header">
								<span>更多权利信息</span>
							</div>
							<div class="l_four">
								<div class="l_onetype">
									<span class="onetype_span">作者姓名：</span><span id="authorName"></span>
								</div>
								<div class="l_onetype">
									<span class="onetype_span">署名情况：</span><span id="signature"></span>
								</div>
								<div class="l_onetype">
									<span class="onetype_span">别名：</span><span id="signature_other"></span>
								</div>
								<div class="l_onetype">
									<span class="onetype_span">作品创作性质：</span><span id="creativeType"></span>
								</div>
								<div class="l_onetype">
									<span class="onetype_span">创作完成日期：</span><span id="finishTime"></span>
								</div>
								<div class="l_twotype">
									<span class="onetype_span">创作完成地点：</span>
									<div class="twotype_div">
										<div class="twotype_span">
											<span id="country_address">
												<span>国家：</span>
												<span id="creativeCountry"></span>
											</span>
											<span id="city_address">
												<span style="margin-left: 20px;">城市：</span>
												<span id="creativeCity"></span>
											</span>
										</div>
									</div>

								</div>
								<div class="l_onetype">
									<span class="onetype_span">发表状态：</span><span id="pubStatus"></span>
								</div>
								<div class="l_onetype">
									<span class="onetype_span">获奖状态：</span><span id="awardStatus"></span>
								</div>
								<div class="l_onetype">
									<span class="onetype_span">权利取得方式：</span><span id="rightGetType"></span>
								</div>
								<div class="l_onetype">
									<span class="onetype_span">权利归属方式：</span><span id="rightOwnType"></span>
								</div>
								<div class="l_twotype">
									<span class="onetype_span"></span>
									<div class="twotype_div">
										<div class="onetype_xia">
											<span>委托合同扫描件：</span>
											<a id="commissionDownload" href="" download="" style="color:#666666">
												<span id="commissionContractUrl"></span>
												<span class="onetype_x"></span>
											</a>

										</div>
									</div>

								</div>
								<div class="l_threetype">
									<span class="threetype_span">权利归属方式说明：</span>
									<div class="threetype_div">
										<div class="threetype_text" id="rightGetRemark">

										</div>
									</div>

								</div>
								<div class="l_threetype">
									<span class="threetype_span">权利拥有状况：</span>
									<div class="threetype_div">
										<div class="threetype_text" id="rightOwn">

										</div>
									</div>

								</div>
								<div class="l_threetype">
									<span class="threetype_span">权利拥有状况说明：</span>
									<div class="threetype_div">
										<div class="threetype_text" id="rightOwnRemark">

										</div>
									</div>

								</div>
								<div class="l_threetype">
									<span class="threetype_span">作品说明书：</span>
									<div class="threetype_div">
										<div class="threetype_text" id="workInstructions">

										</div>
									</div>

								</div>

							</div>
						</div>

					</div>
					<div v-else class="l_cont_twocont" id="l_cont_twocont">
						<div class="l_twocont_one">
							<div class="l_header">
								<span>证书详情</span>
							</div>
							<div class="l_one">
								<div class="l_type">
									<span class="onetype_span">登记作品：</span><span id="worksTitle"></span>
								</div>
								<div class="l_type">
									<span class="onetype_span">登记类型：</span><span id="registrationType"></span>
								</div>
								<div class="l_type">
									<span class="onetype_span">登记日期：</span><span id="registrationTime"></span>
								</div>
								<div class="l_type">
									<span class="onetype_span">作品登记号：</span><span id="registrationNumber"></span>
								</div>
								<div class="l_type">
									<span class="onetype_span">登记证书：</span>
									<a id="registrationCertificateUrl_a" href="" download="#">
										<span id="registrationCertificateUrl"></span>
										<span class="l_type_xz"></span>
									</a>
								</div>

							</div>
						</div>
						<div class="l_twocont_one" id="apply_file_info">
							<div class="l_header" id="appHeader">
								<span>申请材料</span>
							</div>
							<div class="l_one" id="appFile">
								<div class="l_type">
									<span class="onetype_span">作品著作权登记申请表：</span>
									<a id="applyTableUrl_a" href="" download="#">
										<span id="applyTableUrl"></span>
										<span class="l_type_xz"></span>
									</a>
								</div>
								<div class="l_type">
									<span class="onetype_span">申请人身份证明文件复印件：</span>
									<a id="copyrightPeopleUrl_a" href="" download="#">
										<span id="copyrightPeopleUrl"></span><span class="l_type_xz"></span>
									</a>
								</div>
								<div class="l_type">
									<span class="onetype_span">权利归属证明文件：</span>
									<a id="belongCertificateUrl_a" href="" download="#">
										<span id="belongCertificateUrl"></span><span class="l_type_xz"></span>
									</a>
								</div>
								<!--<div class="l_type">
											<span class="onetype_span">作品的样本：</span><span></span><span class="l_type_xz"></span>
										</div>-->
								<div class="l_type">
									<span class="onetype_span">作品说明书：</span>
									<a id="worksExplainUrl_a" href="" download="#">
										<span id="worksExplainUrl"></span><span class="l_type_xz"></span>
									</a>
								</div>
								<div class="l_type">
									<span class="onetype_span">代理委托书：</span>
									<a id="proxyLetterUrl_a" href="" download="#">
										<span id="proxyLetterUrl"></span><span class="l_type_xz"></span>
									</a>
								</div>
								<div class="l_type">
									<span class="onetype_span">代理人身份证明文件：</span>
									<a id="agentCertificateUrl_a" href="" download="#">
										<span id="agentCertificateUrl"></span><span class="l_type_xz"></span>
									</a>
								</div>
								<div class="l_type">
									<span class="onetype_span">其他文件：</span>
									<a id="otherFileUrl_a" href="" download="#">
										<span id="otherFileUrl"></span><span class="l_type_xz"></span>
									</a>
								</div>

							</div>
						</div>
					</div>
				</div>
			</div>
		</div>
	</div>
</template>

<script>
	export default {
		data() {
			return {
				contjoin_header_one:{
					contjoincolor:true,
				},
				contjoin_header_two:{
					contjoincolor:false,
				},
				contjoin_header_one_line:{
					contjoin_header_one_line:true,
				},
				contjoin_header_two_line:{
					contjoin_header_two_line:false
				},
				warehouseContent:true,
				
			};
		},
		methods: {
			// 菜单切换
			warehouseContentDetail(type){
				if(type === 'one'){
					this.contjoin_header_one={
						contjoincolor:true,
					},
					this.contjoin_header_two={
						contjoincolor:false,
					},
					this.contjoin_header_one_line={
						contjoin_header_one_line:true,
					},
					this.contjoin_header_two_line={
						contjoin_header_two_line:false
					},
					this.warehouseContent = true;
				}else{
					this.contjoin_header_one={
						contjoincolor:false,
					},
					this.contjoin_header_two={
						contjoincolor:true,
					},
					this.contjoin_header_one_line={
						contjoin_header_one_line:false,
					},
					this.contjoin_header_two_line={
						contjoin_header_two_line:true
					},
					this.warehouseContent = false;
				}
			}
		},

		beforeMount: function() {
			// console.log("47")
		},
		mounted: function() {
			// console.log("7777777777")
		},
	}
</script>

<style>
	@import 'warehouseDetail.css'
</style>
